<template>
  <div class="addEditDialog powerDialog">
    <el-dialog
      :title="title"
      :visible.sync="dialogVisible"
      width="30%">
      <div class="leftBox">
        <p>角色名称:<span>{{roleName}}</span></p>
        <p>角色状态:<span>{{roleStatus}}</span></p>
      </div>
      <div class="rightBox">
          <el-tree
             ref="tree"
              :data="treeList"
              show-checkbox
              node-key="id" 
              :check-strictly="checkStrictly"
              @check-change="handleCheckChange"
              :default-checked-keys="defaultTreeCheck"
              :default-expanded-keys="defaultTreeCheck"                            
              >
        
              </el-tree>
      </div>
     
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm('ruleFormref')">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { mapState } from 'vuex';
export default {
  name: 'power',
  data () {
    return {
      dialogVisible: false,
      title:'',     
      roleName:'',
      roleStatus:'',
      treeList:[],
      defaultTreeCheck:[] ,
      param:{
        menuIdList:[],
        roleId:null
      },
      url:'/system/role/permission/assignment',
      checkStrictly:true,               
    }
  },
  // props: {
  //     id:{
  //         type: String,
  //         required: true
  //     }      
  // },
  methods: { 
    //获取  树数据
    getTree(roleId){ 
        this.checkStrictly=true;        
      this.$axios({
          method: "get",
          url: '/system/menu/other/checked/list',
          params:{
            roleId:roleId
          },
          headers: {
              "Content-Type": "application/json;charset=UTF-8"
          }
      }).then(res => {                        
          if (res.data.code == 0) { 
            this.treeList=res.data.data.checkMenuInfoTreeCheckDTO;
            this.defaultTreeCheck=res.data.data.checkedMenuIdList; 
              this.checkStrictly=false;                                            
          }else {                                  
             this.$message({
                message: res.msg,
                type: 'warning'
              }); 
          }            

      }).catch(error=>{
          this.$message({
            message: error.msg,
            type: 'error'
          }); 
      }); 
       
    },

        //添加&编辑弹窗的tree  选中获取
    handleCheckChange () {
      // var res = this.$refs.tree.getCheckedNodes()  
      //      var res=this.$refs.tree.getCheckedNodes().concat(this.$refs.tree.getHalfCheckedNodes()); 
      // var arr = [];
      // res.forEach((item) => {
      //   arr.push(item.id)
      // });
      // this.param.menuIdList=arr;
      this.param.menuIdList=this.$refs.tree.getCheckedKeys().concat(this.$refs.tree.getHalfCheckedKeys()) 
      
    },

   
    //弹窗加载  数据渲染
    loadDialogData(item,title){
      this.dialogVisible=true;
      this.title=title;
      this.roleName='';
      this.roleStatus='';
      this.roleName=item.roleName;
      if(item.statusEnum=='NORMAL'){
         this.roleStatus='正常';
      }else if(item.statusEnum=='FORBID'){
        this.roleStatus='停用';
      }else{
        this.roleStatus='';
      }
      this.param.roleId=item.roleId;
      this.getTree(item.roleId);


    },
    submitForm(formName) {                                                                         
      this.$store.dispatch('postform',{param:this.param,url:this.url}).then(() => {
        if(this.addEdit.code==0){
          this.$message({
            message: this.addEdit.msg,
            type: 'success'
          });               
          this.dialogVisible=false;  
          this.$emit('fatherMethod'); 
        }else{
           this.$message({
            message: this.addEdit.msg,
            type: 'warning'
          }); 
        }              
      }).catch(() => {
           this.$message({
            message: this.addEdit.msg,
            type: 'error'
          });           
      })       
     
    },
  
  },
  computed:{
    
    ...mapState(['list','addEdit'])
  },
  mounted(){         
        
  },
  created() {     
      
  },
}
</script>

<style scoped>
.addEditDialog{
  
}

</style>
<style>
.powerDialog .el-dialog__body{
    border-top: 1px solid #ccc;
    margin: 40px;  
    margin-top: 20px;
    min-width: 400px;
    padding: 0px;
    padding-top: 40px;
    display: flex;
}
.powerDialog .leftBox{
  width: 35%;
  height: 100%;
  text-align: left;
}
.powerDialog .leftBox p{
  overflow:hidden;
  padding-bottom: 30px;
  padding-right: 30px;
}
.powerDialog .leftBox p span{
  float: right;
  text-align: right;
}
.powerDialog .rightBox{
    border-left: 1px solid #ccc;
    padding-left: 20px;
}
.powerDialog .rightBox{
  width: 65%;
  height:200px;
  overflow-y:auto;
}
.powerDialog .rightBox::-webkit-scrollbar {/*滚动条整体样式*/
  width: 6px;     /*高宽分别对应横竖滚动条的尺寸*/
  height: 1px;
}
.powerDialog .rightBox::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
  border-radius: 10px;
    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.4);
  background: rgb(216, 214, 214);
}
.powerDialog .rightBox::-webkit-scrollbar-track {/*滚动条里面轨道*/
  -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
  border-radius: 10px;
  background: rgb(247, 244, 244);
}
</style>
